<template>
  <div class="hello">

    <van-row gutter="20">
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
    </van-row>

    <van-row gutter="20">
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid :gutter="10">
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-col>
    </van-row>

    <van-grid square>
      <van-grid-item v-for="value in 4" :key="value" icon="photo-o" text="文字" />
    </van-grid>


    <van-card
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
    >

      <template #footer>
        <van-stepper v-model="value" theme="round" button-size="20" disable-input />
      </template>
    </van-card>

    <van-row gutter="20">
      <van-col span="8">span: 8</van-col>
      <van-col span="8">span: 8</van-col>
      <van-col span="8">span: 8</van-col>
    </van-row>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="badge" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :goods-id="goodsId"
            :quota-used="quotaUsed"
            :hide-stock="sku.hide_stock"
            @buy-clicked="onBuyClicked"
            @add-cart="onAddCartClicked"
    />

    <van-address-list
            v-model="chosenAddressId"
            :list="list"
            :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围"
            default-tag-text="默认"
            @add="onAdd"
            @edit="onEdit"
            @select="onSelect"
    />

    <van-address-edit
          :area-list="areaList"
          show-postal
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
  />

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{

      searchResult: [],
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三1',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
      ],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
        },
      ],
      badge: 15,
      value: 2,
      show: false,
      goodsId: 3,
      quotaUsed: 12,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
              },
              {
                id: '2',
                name: '蓝色',
                imgUrl: 'https://img.yzcdn.cn/2.jpg',
                previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
              }
            ],
            largeImageMode: true, //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 100 // 当前 sku 组合对应的库存
          },
          {
            s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 50, // 价格（单位分）
            stock_num: 50 // 当前 sku 组合对应的库存
          }
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
        picture: 'https://img.yzcdn.cn/1.jpg'
      },
    }
  },
  methods: {
    onBuyClicked(){
      alert('123')
    },
    onAddCartClicked(){
      alert("321")
    },
    onAdd(){
      alert("onAdd")
    },
    onEdit(){
      alert("onEdit")
    },
    onSelect(){
      alert("onSelect")
    },
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  mounted() {
    console.log("1235423")
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
